<template>
  <div class="screen">
    <div class="screen_header">
      <img src="../../assets/screen/screen_head.png" alt="">
      <div class="screen_clock">
        <clock />
      </div>
      <div class="screen_title">
        <img src="../../assets/screen/screen_title.png" alt="">
        <h3>营销数据监控</h3>
      </div>
      <div class="screen_weather">
        <weather />
      </div>
    </div>
    <div class="screen_body">
      <div class="screen_left_icon"><img src="../../assets/screen/screen_left_icon1.png" alt=""></div>
      <div class="screen_right_icon"><img src="../../assets/screen/screen_right_icon1.png" alt=""></div>
      <div class="screen_body_box">
        <div class="abc">
          <div class="a1 a">
            <div class="b1 b">
              <div class="c1 c">
                <headComponent />
              </div>
              <div class="c2 c" >
                <div class="earth_logo">
                  <img src="../../assets/screen/2.png" alt="">
                  <div class="text_box">
                    <p>销售额同比增长</p>
                    <p>
                      <span class="iconfont icon-tianjia"></span>
                      <span class="text">34</span>
                      <i>%</i>
                    </p>
                  </div>
                </div>
                <China ref="china_chart" />
              </div>
            </div>
            <div class="b2 b">
              <div class="c3 c">
                <screen_border />
                <eCharts_2 />
              </div>
              <div class="c4 c">
                <screen_border />
                <eCharts_1 />
              </div>
            </div>
          </div>
          <div class="a2 a">
            <div class="b3 b">
              <div class="c5 c" v-for="(item,index) in orderList" :key="index">
                <screen_border />
                <order_ring  :title="item.title" :percent="item.percent" :orderNum="item.orderNum" />
              </div>
            </div>
            <div class="b4 b">
              <screen_sell_rank />
            </div>
          </div>
        </div>
        <aside>
          <loading1 :loading="loading" />
        </aside>
      </div>
    </div>
    <div class="screen_footer">
      <img src="../../assets/screen/screen_foot.png" alt="">
    </div>
  </div>
</template>

<script>
  import headComponent from './model/screen_head.vue'
  import clock from '../../components/clock/clock.vue'
  import weather from '../../components/weather.vue'
  import China from './model/China.vue'
  import screen_sell_rank from './model/screen_sell_rank.vue'
  import order_ring from './model/order_ring.vue'
  import screen_border from './model/screen_border2.vue'
  import eCharts_2 from './model/echarts_2.vue'
  import eCharts_1 from './model/echarts_1.vue'
  import orderList from '../../apiData/screen/orderList.js'
  export default {
    name: "screen",  // 大屏
    data() {
      return {
        loading: false,
        num: 80,
        orderList: [
          { title: '主平台', percent: 0, orderNum: 0 },
          { title: '平台一', percent: 0, orderNum: 0 },
          { title: '平台二', percent: 0, orderNum: 0 }
        ]
      }
    },
    components: {
      headComponent,
      clock,
      weather,
      China,
      screen_sell_rank,
      order_ring,
      eCharts_2,
      eCharts_1,
      screen_border,
    },
    created() {
      this.getData();
      this.$nextTick(() => {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 2000)
      })
    },
    mounted() {
      window.onresize = () => (() => {
        this.$refs.china_chart.resetChina();
      })();
    },
    methods: {
      getData() {
        let timer = setTimeout(() => {
          this.orderList = orderList;
          clearTimeout(timer)
        },2000)
      },
      numBBB() {
        this.num = 10
      }
    }
  }
</script>

<style scoped lang="scss">
  .screen {
    width: 100vw;
    height: 100vh;
    background: #000;
    overflow: hidden;
    .screen_header,
    .screen_footer{
      width: 100%;
      height: 60px;
      position: relative;
      img{
        width: 100%;
        height: 100%;
      }
      .screen_clock{
        position: absolute;
        left: 0;
        top: 0;
        width: 10%;
        height: 60px;
        text-align: center;
        padding-top: 10px;
      }
      .screen_weather{
        position: absolute;
        right: 0;
        top: 0;
        width: 10%;
        height: 60px;
        text-align: center;
        padding-top: 10px;
      }
      .screen_title{
        width: 22%;
        height: 50px;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%, 0);
        h3{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          text-align: center;
          line-height: 50px;
          font-size: 20px;
          font-weight: bolder;
          letter-spacing: 2px;
          /* 文字颜色渐变 */
          background-image: -webkit-linear-gradient(top, #fff, rgba(37, 171, 147, 1), rgba(37, 171, 147, 0.7));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
    .screen_body{
      width: 100%;
      height: calc(100% - 120px);
      position: relative;
      .screen_left_icon{
        position: absolute;
        top: 0;
        left: 0;
      }
      .screen_right_icon{
        position: absolute;
        top: 0;
        right: 0;
      }
      .screen_body_box{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*border: 1px solid rgba(0, 135, 100, 0.6);*/
        .abc{
          min-width: 1587px;
          height: 100%;
        }
        .c2,.c3,.c4,.c5,.c6,.c7{
          position: relative;
        }
        .a1{
          height: calc(100% - 180px);
          display: flex;
          .b1{
            width: calc(100% - 540px);
            .c1{
              height: 120px;
            }
            .c2{
              height: calc(100% - 120px);
              .earth_logo{
                position: absolute;
                top: 40px;
                left: 40px;
                display: flex;
                align-items: center;
                img{
                  width: 120px;
                  height: 120px;
                }
                .text_box{
                  p{
                    font-size: 18px;
                    color: #9a6e3a;
                    margin: 4px 0;
                    span.iconfont{
                      color: #3AF10E;
                      font-size: 16px;
                    }
                    span.text{
                      color: #fff;
                      font-size: 22px;
                      font-weight: bold;
                      margin: 0 6px;
                    }
                    i{
                      font-size: 16px;
                    }
                  }
                }
              }
            }
          }
          .b2{
            width: 540px;
            .c3{
              height: 30%;
            }
            .c4{
              height: 70%;
            }
          }
        }
        .a2{
          height: 180px;
          display: flex;
          .b3,.b4{
            width: 50%;
          }
          .b3{
            display: flex;
            justify-content: space-between;
            .c{
              width: 33.3%;
            }
          }
        }
      }
    }
  }
</style>
